<template>
  <div class="fixed-item">
    <div class="card" v-if="!isLogin">
      <Card dis-hover>
        <div class="form-box">
          <ValidationObserver ref="login_form">
            <ValidationProvider rules="required" name="用户名">
              <div class="username-wrapper form-item" slot-scope="{ errors,classes }">
                <input
                  type="text"
                  class="username"
                  :class="classes"
                  placeholder="请输入用户名"
                  v-model="login.username"
                />
                <p class="form_tips">{{ errors[0] }}</p>
              </div>
            </ValidationProvider>
            <ValidationProvider rules="required" name="密码">
              <div class="password-wrapper form-item" slot-scope="{ errors,classes }">
                <input
                  type="password"
                  class="password"
                  :class="classes"
                  placeholder="请输入密码"
                  v-model="login.password"
                />
                <p class="form_tips">{{ errors[0] }}</p>
              </div>
            </ValidationProvider>
          </ValidationObserver>

          <div class="login">
            <button @click="tologin()">登录</button>
          </div>
        </div>
      </Card>
    </div>

    <div class="card">
      <Card dis-hover>
        <p slot="title" style="height:1rem;line-height:1rem">作者榜</p>
        <div class="author_box">
          <div class="list" v-for="(item,index) in authors" :key="index">
            <router-link :to="{path:'/user/'+item.uid}">
              <div class="avatar">
                <img :src="item.userAvatar" alt />
              </div>
              <div class="info">
                <div class="username">{{item.username}}</div>
                <div class="email">{{item.email}}</div>
              </div>
            </router-link>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";
import { ValidationProvider, ValidationObserver } from "vee-validate";
export default {
  name: "mainright",
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      isLogin: this.$store.state.isAuthenticated,
      authors: [],
      login: {
        username: "",
        password: ""
      }
    };
  },
  watch: {
    $route(val) {
      this.getHotAuthor();
    }
  },
  methods: {
    getHotAuthor() {
      this.$axios
        .get("/getHotAuthor")
        .then(res => {
          this.authors = res.data.data;
        })
        .catch(err => {
          console.log(err.response);
        });
    },
    tologin() {
      this.$refs.login_form.validate().then(res => {
        //   验证成功后
        if (res) {
          this.$axios
            .post("/login", {
              username: this.login.username,
              password: this.login.password
            })
            .then(res => {
              const auth = res.data.data;
              localStorage.setItem("auth", auth);
              // 解析token
              const decode = jwt_decode(auth);
              this.$store.dispatch("setIsAuthenticated", true);
              this.$store.dispatch("setUser", decode);
              location.reload();
            })
            .catch(err => {
              console.log(err.response);
              this.$Message.error({
                background: true,
                content: err.response.data.msg,
                duration: 2.5
              });
            });
        }
      });
    }
  },
  mounted() {
    this.getHotAuthor();
  }
};
</script>

<style lang='scss'>
.fixed-item {
  position: fixed;
  width: 240px;

  .card {
    padding-bottom: 1rem;
    .form-box {
      background-color: #fff;
      input {
        padding: 0 0.5rem;
        width: 100%;
        outline: none;
        border: 1px solid #ddd;
      }

      input.invalid {
        border: 1px solid #eb0600;
      }

      .head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        .title {
          font-size: 20px;
        }
        i {
          font-size: 12px;
          color: #b3b3b3;
          cursor: pointer;
        }
        i:hover {
          color: #000;
        }
      }
      .form-item {
        margin-bottom: 1rem;
      }
      .username-wrapper {
        .username {
          height: 2.5rem;
          // margin-bottom: 1rem;
        }
      }
      .password-wrapper {
        .password {
          height: 2.5rem;
          // margin-bottom: 1rem;
        }
      }
      .login {
        text-align: center;
        margin-bottom: 1rem;
        button {
          width: 100%;
          padding: 0.5rem 1.5rem;
          font-size: 0.9rem;
          border: none;
          outline: none;
          background-color: #1bb76e;
          color: #fff;
          cursor: pointer;
        }
        button:hover {
          background-color: #2ecc71;
        }
      }
      .tips {
        text-align: center;
        font-size: 0.8rem;
        span {
          color: #1bb76e;
          cursor: pointer;
        }
      }
    }

    .author_box {
      .list {
        padding: 0.5rem;

        a {
          display: flex;
          flex-direction: row;
          height: 100%;
          width: 100%;
          .avatar {
            display: flex;
            align-items: center;
            img {
              width: 3rem;
              height: 3rem;
              border-radius: 4px;
            }
          }
          .info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            padding-left: 1rem;
            color: #333333;
            max-width: 9rem;
            .username {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .email {
              color: #909090;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
      .list:hover {
        background-color: hsla(0, 0%, 84.7%, 0.1);
      }
    }
  }
}
</style>